<div class="width-100">
    <es-header [title]="'订单管理'" [class]="'order'"></es-header>
</div>
<div class="page-background">
    <div class="page-container">
        <div class="display-flex flex-direction-column">
            <div class="width-100 main-title">
                云主机
            </div>
            <div class="width-100 display-flex" style="margin-top: 30px;">
                <span class="title-font">cpu:</span>
                <div style="flex:1" class="display-flex cpu">
                    <div *ngFor="let c of cpu" class="cursor-pointer title-text" (click)="select('cpu',c)" [ngClass]="{'active':c.name==selectCpu.name}">
                        {{c.name}}
                    </div>
                </div>
            </div>
            <div class="width-100 display-flex" style="margin-top: 24px;">
                <span class="title-font">内存:</span>
                <div style="flex:1" class="display-flex memory">
                    <div *ngFor="let c of memory" class="cursor-pointer title-text" (click)="select('memory',c)" [ngClass]="{'active':c.name==selectMemory.name}">
                        {{c.name}}
                    </div>
                </div>
            </div>
            <div class="width-100 display-flex" style="margin-top: 24px;">
                <span class="title-font">操作系统:</span>
                <div style="flex:1" class="display-flex os">
                    <select [(ngModel)]="selectOs.selectName" class="order-select" style="width:224px" (ngModelChange)="select('os')">
                        <option *ngFor="let c of os" [value]="c.name">{{c.name}}</option>
                    </select>
                    <span class="disk-text">该镜像大小为{{selectOs.disk}}</span>
                </div>
            </div>
            <div class="width-100 main-title" style="margin-top: 24px;">
                存储
            </div>
            <div class="width-100 display-flex" style="margin-top: 30px;">
                <span class="title-font">文件系统:</span>
                <div style="flex:1" class="display-flex os">
                    <select [(ngModel)]="selectFile" style="width:86px" class="order-select">
                        <option *ngFor="let c of file" [value]="c">{{c}}</option>
                    </select>
                </div>
            </div>
            <div class="width-100 main-title" style="margin-top: 24px;">
                网络
            </div>
            <div class="width-100 display-flex" style="margin-top: 30px;">
                <span class="title-font">带宽:</span>
                <div style="flex:1" class="display-flex os">
                    <select [(ngModel)]="selectNetWork" style="width:86px" class="order-select">
                        <option *ngFor="let c of netWork" [value]="c">{{c}}</option>
                    </select>
                    <span>Mbps</span>
                </div>
            </div>
            <div class="width-100 main-title" style="margin-top: 24px;">
                系统信息
            </div>
            <div class="width-100 display-flex" style="margin-top: 30px;">
                <div class="display-flex flex-direction-column width-100">
                    <div class="display-flex width-100">
                        <span class="title-font">管理员用户名：</span>
                        <input style="width:224px" [(ngModel)]="userName" type="text">
                    </div>
                    <div class="display-flex width-100" style="margin-top: 6px;">
                        <span class="title-font">管理员密码：</span>
                        <div class="display-flex flex-direction-column">
                            <input [(ngModel)]="password" style="width:224px" type="password" placeholder="请输入密码">
                            <input [(ngModel)]="rePassword" style="width:224px" type="password" placeholder="请再次输入密码">
                        </div>
                    </div>
                    <div class="display-flex width-100" style="margin-top: 6px;">
                        <span class="comment-text title-font">备注：</span>
                        <textarea style="width:520px;height:100px" class="comment" [(ngModel)]="comment" placeholder="请输入云主机备注"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="width-100">
            <button class="order-button" (click)="submit()">提交</button>
        </div>
    </div>
</div>
<clr-modal [(clrModalOpen)]="basic" [clrModalSize]="'sm'" [clrModalClosable]="true">
    <h3 class="modal-title">提交订单</h3>
    <div class="modal-body">
        <p>{{modalInfo}}</p>
    </div>
</clr-modal>